
<template>
    <div class="home">
      <el-container style="width:100%;height:100%">
         <el-aside id="aside" width="200px">
             <span class="title"><img src="@/assets/img/logo.png" class="logoImg">后台管理系统</span>
            <el-menu background-color="#3a3f51" text-color="#fff" @open="handleOpen" @close="handleClose" style="border-right:none">
               <el-submenu index="1">
                  <template slot="title"><i class="el-icon-setting"></i>系统配置</template>
                  <el-menu-item index="1-1">角色管理</el-menu-item>
                  <el-menu-item index="1-1">管理员列表</el-menu-item>
                  <el-menu-item index="1-1">商城装饰</el-menu-item>
               </el-submenu>
               <el-submenu index="2">
                  <template slot="title"><i class="el-icon-s-check"></i>基础资料</template>
                  <el-menu-item index="1-1">商品维护</el-menu-item>
                  <el-menu-item index="1-1">商品分组</el-menu-item>
                  <el-menu-item index="1-1">专区维护</el-menu-item>
                  <el-menu-item index="1-1">仓库维护</el-menu-item>
                  <el-menu-item index="1-1">代理商维护</el-menu-item>
                  <el-menu-item index="1-1">门店维护</el-menu-item>
                  <el-menu-item index="1-1">仓库辐射区域</el-menu-item>
                  <el-menu-item index="1-1">账户审核</el-menu-item>
               </el-submenu>
               <el-submenu index="3">
                  <template slot="title"><i class="el-icon-s-management"></i>营销设置</template>
                  <el-menu-item index="1-1">订单金额</el-menu-item>
                  <el-menu-item index="1-1">订单规则</el-menu-item>
                  <el-menu-item index="1-1">订货列外规则</el-menu-item>
                  <el-menu-item index="1-1">下单公告</el-menu-item>
                  <el-menu-item index="1-1">水果类数量规则</el-menu-item>
                  <el-menu-item index="1-1">速冻类数量规则</el-menu-item>
                  <el-menu-item index="1-1">必买商品列外区域</el-menu-item>
                  <el-menu-item index="1-1">区域直运商品</el-menu-item>
               </el-submenu>
               <el-submenu index="4">
                  <template slot="title"><i class="el-icon-s-shop"></i>促销管理</template>
                  <el-menu-item index="1-1">客户分组</el-menu-item>
                  <el-menu-item index="1-1">拼单设置</el-menu-item>
                  <el-menu-item index="1-1">促销活动</el-menu-item>
                  <el-menu-item index="1-1">促销规则</el-menu-item>
               </el-submenu>
                <el-submenu index="5">
                  <template slot="title"><i class="el-icon-s-order"></i>订单管理</template>
                  <el-menu-item index="1-1">未处理订单列表</el-menu-item>
                  <el-menu-item index="1-1">已处理订单列表</el-menu-item>
                  <el-menu-item index="1-1">退换货列表</el-menu-item>
                  <el-menu-item index="1-1">返款查询</el-menu-item>
                  <el-menu-item index="1-1">返利查询</el-menu-item>
                  <el-menu-item index="1-1">订单协同规则</el-menu-item>
                  <el-menu-item index="1-1">代客下单</el-menu-item>
               </el-submenu>
                <el-submenu index="6">
                  <template slot="title"><i class="el-icon-headset"></i>QQ客服</template>
                  <el-menu-item index="1-1">客服列表</el-menu-item>
               </el-submenu>
            </el-menu>
         </el-aside>
         <el-container>
            <el-header id="header" height="60px" >
               <el-dropdown>
                  <i class="el-icon-setting"></i>
                  <el-dropdown-menu slot="dropdown">
                     <el-dropdown-item>修改密码</el-dropdown-item>
                     <el-dropdown-item>下单时间</el-dropdown-item>
                     <el-dropdown-item>退出登录</el-dropdown-item>
                  </el-dropdown-menu>
               </el-dropdown>
               <span>admin</span>
            </el-header>
            <el-main id="main">
               <transition name="fade" mode="out-in" appear>
                  <router-view></router-view>
               </transition>
            </el-main>
         </el-container>
      </el-container>
    </div>
</template>
<script>
export default {
   data() {
      return {
      }
   },
   activated() {
   },
   methods: {
      handleOpen(key,keyPath) {
         console.log('打开',key,keyPath)
      },
      handleClose(key,keyPath) {
         console.log('关闭',key,keyPath)
      }
   }
}
</script>
<style scoped>
.home{
   font-size: 40rpx;
   width: 100%;
   height: 100%;
}
#aside {
   color: #fff;
   background: #3a3f51;
}
#header {
   width: 100%;
   background: #fff;
   text-align: right;
   line-height: 60px;
}
#main{
   width: 100%;
   height: 100%;
   background: #ebf1f3;
}
.logoImg{
   width: 30px;
   height: 30px;
   vertical-align: middle;
   margin-right: 10px;
}
.title{
   font-size: 20px;
   display: inline-block;
   height: 64px;
   width: 100%;
   text-align: center;
   line-height: 64px;
   border-bottom: 1px solid #fff;
}

</style>

